<template>
  <div class="config-container">
    <div v-for="(editor, key) in editors" :key="`${props.compId}_${key}`">
      <ElDivider v-if="editor.displayName" border-style="dashed">
        {{ editor.displayName }}
      </ElDivider>
      <component
        :is="editor.component"
        :editorKey="key"
        :state="editor.value"
      />
    </div>
  </div>
</template>

<script setup>
// 渲染组件编辑配置
const props = defineProps({
  editors: {
    type: Object,
    default: () => ({}),
  },
  compId: { type: [String, Number], default: "" },
});
</script>

<style scoped>
.config-container {
  padding: 10px;
}
.config-container :deep(.el-form-item) {
  margin-bottom: 5px;
}
.config-container :deep(.el-form-item__label) {
  margin-bottom: 0;
}
</style>
